<template>
<!-- <el-affix :offset="7"> -->
  <div class="header">
    <div class="title">实验室辅助管理系统</div>
    <div class="logout"><a href="#" @click="Loginout"> 退出</a></div>
    <div class="role">当前身份：{{role}} | </div>
  </div>
<!-- </el-affix> -->
</template>

<script>
import router from '@/router'
    export default {
      data(){
        return{
          role:"管理员"
        }
      },
      methods:{
        Loginout(){
          localStorage.clear()
          router.push('/Login')
        }
      }
      ,
      mounted(){
        this.role = localStorage.getItem('roleName')
        //localStorage.setItem("loginUser",'{"id":33,"userName":"小马","userPicUrl":"https://swapend.top/images/MerchantImages/20240425094041163096.png","roles":[{"id":1,"roleName":"管理员"},{"id":2,"roleName":"商家"},{"id":5,"roleName":"审核员"}]}')
        // let loginUser=JSON.parse(localStorage.getItem('loginUser'))
        // this.role= loginUser.roles.map(r=>{
        //   return r.roleName
        // }).join(',')
      }
    }
</script>

<style>
    .header{
        height: 50px;
        width: 100%;
        background-color:white;
        color:	#3016b1;
        box-shadow: 0 0 2px 1px #ffffff   
    }
    .header .title{
      display: inline-block;
      margin-left: 30px;
      line-height: 50px;
      font-size: 20px;
    }
    .header .role{
      float:right;
      line-height: 50px;
      font-size: 16px;
    }
    .header .logout{
      float:right;
      margin-right: 10px;
      margin-right: 5px;
      line-height: 50px;
      font-size: 14px;
    }
</style>